<template>
  <div class="flex gap-4 mb-4">
    <span><b>场地搜索： </b></span>
    <el-input
      v-model="input2"
      style="width: 240px"
      placeholder="输入场地"
      :prefix-icon="Search"
      @input="$emit('output',input2)"
    /> 
    <div class="spacer"></div>
    
  </div>



<el-button type="primary"  @click="dialogFormVisible = true">
  添加场地
</el-button>


 <el-dialog v-model="dialogFormVisible" title="添加场地" width="500">
  <el-form :model="form" label-width="100px">
    <el-row :gutter="20">
      <el-col :span="12">
        <el-form-item label="场地ID">
          <el-input v-model="form.FieldID" autocomplete="off" @input = "checkForm" />
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="地址">
          <el-input v-model="form.Address" autocomplete="off" @input = "checkForm" />
        </el-form-item>
      </el-col>
    </el-row>

    <el-row :gutter="20">
      <el-col :span="12">
        <el-form-item label="场馆开门时间">
          <el-time-select
    v-model="form.openTime" @input = "checkForm"
    style="width: 240px"
    start="00:00"
    step="01:00"
    end="23:00"
    placeholder="Select time"
  />
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="场馆闭馆时间">
          <el-time-select
    v-model="form.closeTime" @input = "checkForm"
    style="width: 240px"
    start="00:00"
    step="01:00"
    end="23:00"
    placeholder="Select time"
  />
        </el-form-item>
      </el-col>
    </el-row>

 

    <el-row :gutter="20">
      <el-col :span="12">
        <el-form-item label="场馆负责人">
          <el-input v-model="form.MasterAccount" autocomplete="off" @input = "checkForm"/>
        </el-form-item>
      </el-col>

      <el-col :span="12">
        <el-form-item label="价格">
          <el-input v-model="form.Price" autocomplete="off" @input = "checkForm"/>
        </el-form-item>
      </el-col>
    </el-row>


    <el-row :gutter="20">
      <el-col :span="12">
        <el-form-item label="经度">
          <el-input v-model="form.latitude" autocomplete="off" @input = "checkForm"/>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="纬度">
          <el-input v-model="form.longitude" autocomplete="off" @input = "checkForm"/>
        </el-form-item>
      </el-col>
    </el-row>


    <el-row :gutter="20">
      <el-col :span="12">
      <el-form-item label="备注">
      <el-input
    v-model="form.notes"
    style="width: 240px"
    :rows="2"
    type="textarea"
    placeholder="备注输入"
  />  
  </el-form-item>
  </el-col>
    </el-row>

    <el-row>
      <el-col :span="24">
        <el-form-item>
          <el-button  @click="dialogFormVisible = false">取消</el-button>
          <el-button type="primary" @click="submitForm"  :disabled="flag">添加</el-button>
        </el-form-item>
      </el-col>
    </el-row>
  </el-form>
</el-dialog>




</template>

<script lang="ts" setup>
import axios from 'axios'
import { ref } from 'vue'
const value = ref('')
import { Calendar, Search } from '@element-plus/icons-vue'
const input1 = ref('')
const input2 = ref('')
const input3 = ref('')
const input4 = ref('')
const deleteSelected = ref(false)
import { reactive} from 'vue'
const flag = ref(true);
const dialogTableVisible = ref(false)
const dialogFormVisible = ref(false)
const formLabelWidth = '140px'

const form = reactive({
FieldID: '',
Address: '',
openTime: '',
closeTime: '',
MasterAccount: '',
Price: '',
create_date:'',
latitude: '',
longitude: '',
notes: '',
})
function checkForm(){
  if(form.FieldID && form.Address &&form.MasterAccount && form.Price &&form.latitude &&form.longitude){
      flag.value = false;
  }else{
    flag.value = true;
  }
}
import {  } from 'vue'


const value1 = ref('')
const value2 = ref('')
const textarea = ref('')
const shortcuts = [
{
  text: 'Today',
  value: new Date(),
},
{
  text: 'Yesterday',
  value: () => {
    const date = new Date()
    date.setTime(date.getTime() - 3600 * 1000 * 24)
    return date
  },
},
{
  text: 'A week ago',
  value: () => {
    const date = new Date()
    date.setTime(date.getTime() - 3600 * 1000 * 24 * 7)
    return date
  },
},
]

const disabledDate = (time: Date) => {
  return time.getTime() > Date.now()
}

  function submitForm(){
    const userData = {
                fieldID: form.FieldID,
                address: form.Address,
                openTime : form.openTime,
                closeTime: form.closeTime,
                masterAccount: form.MasterAccount,
                price: form.Price,
                latitude: form.latitude,
                longitude: form.longitude,
                notes: form.notes
            }
            console.log("form.FieldID"+form.FieldID);
            console.log(userData);
            axios.post('http://localhost:9001/Field/addField',userData).then(response =>{
                if(response.data){
                    alert("添加成功")
                    this.$router.push('/')
                }else{
                    alert("添加失败，场地已存在")
                }})
                dialogFormVisible.value = false;
  }



</script>


<style scoped>
.spacer {
  margin: 16px 0; /* 控制空行的高度，16px 可以根据需要调整 */
}

.demo-date-picker {
display: flex;
width: 100%;
padding: 0;
flex-wrap: wrap;
}

.demo-date-picker .block {
padding: 30px 0;
text-align: center;
border-right: solid 1px var(--el-border-color);
flex: 1;
}

.demo-date-picker .block:last-child {
border-right: none;
}

.demo-date-picker .demonstration {
display: block;
color: var(--el-text-color-secondary);
font-size: 14px;
margin-bottom: 20px;
}
</style>
